<template>
  <el-card class="box-card">
    <el-form :inline="true" :model="form">
      <el-form-item label="部门名称">
        <el-input v-model="form.deptName" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="success" v-if="$formatFR(dept.add)" @click="handleAddTop">新增</el-button>
        <el-button type="primary" @click="searchRegional">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%" row-key="id" :default-expand-all="expands">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column label="部门名称" prop="deptName" align="left" />
      <el-table-column label="主键" prop="deptId" align="center" />
      <el-table-column prop="orderNo" label="排序" align="center" />
      <el-table-column prop="deptLeader" label="部门负责人" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-link
            type="success"
            size="mini"
            plain
            v-if="$formatFR(dept.add)"
            :style="{ marginRight: '0.0521rem' }"
            @click="handleAdd(scope.row)"
          >
            新增
          </el-link>
          <el-link
            type="warning"
            size="mini"
            plain
            v-if="$formatFR(dept.edit)"
            :style="{ marginRight: '0.0521rem' }"
            @click="handleEditor(scope.row)"
          >
            编辑
          </el-link>
          <el-link
            type="danger"
            size="mini"
            plain
            v-if="$formatFR(dept.del)"
            @click="handleDel(scope.row.deptId)"
          >
            删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗部门 -->
    <AddEditDialog ref="AddEditDialog" :data-list="tableData" @updatePage="getList" />
  </el-card>
</template>

<script>
import { treeList, del } from "@/api/system/dept"
import AddEditDialog from "./components/AddEditDialog"
import FUNCROLELIST from "@/utils/func_role/system"
export default {
  components: {
    AddEditDialog
  },
  data() {
    return {
      dept: FUNCROLELIST.dept,
      form: {
        deptName: ""
      },
      expands: false,
      tableData: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    reset() {
      this.form = {
        deptName: ""
      }
      this.getList()
    },
    handleAddTop() {
      this.$refs.AddEditDialog.init(null, "新增")
    },
    // 新增
    handleAdd(scope) {
      this.$refs.AddEditDialog.init(scope, "新增")
    },
    // 删除部门
    handleDel(deptId) {
      this.$confirm("请确认是否删除当前部门?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        del(deptId).then(() => {
          this.getList()
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
      })
    },
    // 编辑部门
    handleEditor(scope) {
      this.$refs.AddEditDialog.init(scope, "编辑")
    },
    // 搜索部门
    searchRegional() {
      this.getList()
    },

    // 获取部门列表
    async getList() {
      const { data } = await treeList(this.form)
      this.tableData = data
      this.expands = true
    }
  }
}
</script>
